$e-kit-library-sticky-search-z-index: 2;

.e-kit-library {
	&__index-layout-container {
		flex-grow: 1;
		overflow-y: auto;
		display: flex;
		flex-direction: column;
	}

	&__index-layout-heading {
		padding: spacing(30) spacing(44);
		position: sticky;
		inset-block-start: -1px;
		width: 100%;
		z-index: $e-kit-library-sticky-search-z-index;
		background-color: var(--app-background-color);
		gap: spacing( 24 );
		align-items: center;

		&-search, &-sort {
			min-width: 265px;
		}

		&-search {
			flex: 1;
		}

		&-quota {
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}

	&__index-layout-main {
		padding-block-start: spacing(0);
		padding-block-end: spacing(24);
		overflow-y: hidden;
		height: auto;
		flex: 1 0 auto;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		&.e-kit-library__connect-container {
			justify-content: center;
			align-items: center;
		}
	}

	&__connect-button {
		background-color: var(--e-a-btn-bg-primary);
		color: var(--e-a-btn-color);
		border-radius: 4px;
		padding: 8px;
	
		&:hover {
			opacity: 0.8;
		}
	}

	&__upgrade-button {
		background-color: var(--e-a-color-accent);
		color: var(--e-a-color-txt-invert);
		border-radius: 4px;
		padding: 8px;
	
		&:hover {
			opacity: 0.8;
		}
	}
	
	.eicon-library-cloud-connect,
	.eicon-library-subscription-upgrade {
		font-size: 65px;
	}

	.connect-badge {
		color: $e-pink-900;
		margin-inline-start: 10px;
	}

	.upgrade-badge {
		color: $e-accent;
		border: 1px solid $e-accent;
		border-radius: 10px;
		padding: 2px 6px;
		margin-inline-start: 10px;
	}
}
